<template>
	<view>
		<view class="wrap-article-list safe-area">
			<block v-for="(item, index) in list" :key="index">
				<view class="item" @click="$jump.onArticleDetail(item.id)">
					<view class="user-info flex align-center just-between" v-if="item.user_id !== null">
						<view class="flex align-center">
							<image
								class="avatar"
								:src="$getImageURL(item.is_shop === 1 ? item.shop.avatar : item.user.avatar)"
							/>

							<view class="nickname f-28">
								{{ item.is_shop === 1 ? item.shop.shopname : item.user.nickname }}
							</view>
						</view>

						<view class="flex align-center" v-if="item.is_shop === 1">
							<view
								class="collection f-26"
								:class="item.isFollow == 0 ? 'no-collect' : 'has-collect'"
								@click.stop="onFollowShop(item, index)"
							>
								{{ item.isFollow == 0 ? "+关注" : "已关注" }}
							</view>

							<image class="shop" :src="$staticImagePath('article/shop.png')" />
						</view>
					</view>

					<view class="title fBold f-32 limit-num-line">
						<text class="topSign f-32" v-if="item.is_top == 1">置顶</text>

						<text>{{ item.title }}</text>
					</view>

					<view class="line" v-if="item.article_type == 0 && item.images.length === 0"></view>

					<view class="file" v-else>
						<view v-if="item.article_type == 1" class="video-bg">
							<image class="video" :src="$getImageURL(item.image)" />

							<view class="play-bg flex align-center just-center">
								<image class="play" :src="$staticImagePath('article/play.png')" />
							</view>
						</view>

						<view class="images-list flex just-between" v-else>
							<block v-if="item.images.length >= 3">
								<image class="imgs" :src="$getImageURL(item.images[0])" />

								<image class="imgs" :src="$getImageURL(item.images[1])" />

								<image class="imgs" :src="$getImageURL(item.images[2])" />
							</block>

							<block v-else-if="item.images.length >= 1">
								<image class="single-img" :src="$getImageURL(item.images[0])" />
							</block>
						</view>
					</view>

					<view class="bottom flex align-center just-between">
						<view class="name-time flex align-center f-26">
							<view v-if="item.user_id === null">{{ item.platform_prompt }}</view>

							<view>{{ item.createtime_text2 }}</view>
						</view>

						<view class="flex align-center">
							<view class="evaluate-bg flex align-center">
								<image class="img" :src="$staticImagePath('article/evaluate.png')" />

								<view class="num f-24">{{ item.comment_num }}</view>
							</view>

							<view class="zan-bg flex align-center">
								<image class="img" :src="$staticImagePath('article/zan.png')" />

								<view class="num f-24">{{ item.like_num }}</view>
							</view>

							<view class="look-bg flex align-center">
								<image class="img" :src="$staticImagePath('article/look.png')" />

								<view class="num f-24">{{ item.read }}</view>
							</view>
						</view>
					</view>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/big_red.png')"
						v-if="item.is_bonus == 1 && item.bonus.is_hefty_bonus == 1 && item.isReceive == 0"
					/>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/big_red_receive.png')"
						v-else-if="item.is_bonus == 1 && item.bonus.is_hefty_bonus == 1 && item.isReceive == 1"
					/>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/coupon.png')"
						v-else-if="item.is_bonus == 1 && item.bonus.type == 1 && item.isReceive == 0"
					/>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/coupon_no.png')"
						v-else-if="item.is_bonus == 1 && item.bonus.type == 1 && item.isReceive == 1"
					/>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/red_no.png')"
						v-else-if="item.is_bonus == 1 && item.bonus.type == 0 && item.isReceive == 1"
					/>

					<image
						class="redImg"
						mode="widthFix"
						:src="$staticImagePath('article/red_have.png')"
						v-else-if="item.is_bonus == 1 && item.bonus.type == 0 && item.isReceive == 0"
					/>
				</view>
			</block>
		</view>

		<wanl-empty v-if="list.length === 0" text="暂无文章内容" />
	</view>
</template>

<script>
	import { followAndUnfollow } from "@/API/article.js";
	export default {
		props: {
			list: {
				type: Array,
				default: [],
			},
		},
		methods: {
			/**
			 * 预览图片
			 */
			onPreviewImage(list, index) {
				this.$filters.onPreviewImage(list, index);
			},
			/**
			 * 关注/取消关注
			 */
			onFollowShop(item, index) {
				followAndUnfollow(item.shop.find_user.user_no).then((res) => {
					this.$st.show(res.msg, () => {
						this.list.forEach((data, idx) => {
							if (data.is_shop === 1) {
								if (data.shop.find_user.user_no === item.shop.find_user.user_no) {
									data.isFollow = data.isFollow === 0 ? 1 : 0;
								}
							}
						});
						this.$set(this.list);
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-article-list {
		width: 100%;
		overflow: hidden;

		.item {
			width: 100%;
			background-color: white;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			padding: 0 25rpx 25rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 1;

			&:last-child {
				margin-bottom: 0rpx;
			}

			.user-info {
				width: 100%;
				padding: 20rpx 0rpx;
				border-bottom: 1rpx solid #f4f4f4;

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.nickname {
					margin-left: 12rpx;
					color: #121212;
				}

				.collection {
					width: 120rpx;
					height: 48rpx;
					border-radius: 24rpx;
					overflow: hidden;
					line-height: 48rpx;
					text-align: center;
					color: #fdfdfd;
				}

				.no-collect {
					background: linear-gradient(90deg, #dd551b, #f49355);
				}

				.has-collect {
					background-color: #cfcfcf;
				}

				.shop {
					margin-left: 20rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}

			.title {
				--limit-num: 1;
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;
				line-height: 48rpx;
				padding-right: 140rpx;

				.topSign {
					height: 48rpx;
					line-height: 48rpx;
					background: $theme-gradit-color;
					color: white;
					border-radius: 10rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
				}
			}

			.line {
				margin-top: 25rpx;
				width: 100%;
				height: 2rpx;
				background-color: #f4f4f4;
			}

			.file {
				margin-top: 30rpx;
				margin-left: -25rpx;
				width: calc(100% + 50rpx);
				overflow: hidden;

				.video-bg {
					width: 224rpx;
					position: relative;
					z-index: 1;
					overflow: hidden;

					.video {
						width: 224rpx;
						height: 224rpx;
					}

					.play-bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.1);
						z-index: 2;

						.play {
							width: 80rpx;
							height: 80rpx;
						}
					}
				}

				.images-list {
					width: 100%;
					overflow: hidden;

					.imgs {
						width: 224rpx;
						height: 224rpx;
					}

					.single-img {
						width: 224rpx;
						height: 224rpx;
						overflow: hidden;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;

				.name-time {
					gap: 10rpx;
					color: #888888;
				}

				.evaluate-bg {
					gap: 15rpx;
				}

				.zan-bg {
					margin-left: 27rpx;
					gap: 10rpx;
				}

				.look-bg {
					margin-left: 20rpx;
					gap: 5rpx;
				}

				.img {
					width: 30rpx;
					height: 30rpx;
				}
				.num {
					color: #888888;
				}
			}

			.redImg {
				position: absolute;
				right: 3rpx;
				top: 93rpx;
				width: 120rpx;
				z-index: 2;
			}
		}
	}
</style>
